<template>
	<view style="font-size: 24rpx;font-weight: 400;position: relative;height: 100vh;">
		<u-navbar title='订单详情' :autoBack="true" left-icon-color="black" :titleStyle="{'color':'black'}"   bgColor="transparent"></u-navbar>
		<image src="http://qiniuapplet.jiachuangnet.com/pageHeader.png" style="width: 100%;height:494rpx;z-index: 1;"></image>
		<view class='container'>
			<view class="bg">
				<image src='http://qiniuapplet.jiachuangnet.com/orderDetails/container.png'
					style="width: 100%;height: 100%;position: absolute;top:0;left:0;"></image>
				<view style="width:100%;position: absolute;top:0;left:0">
					<view style="padding:20rpx;font-size: 32rpx;font-weight: 700;color:white;">{{orderInfo.storeName}}
					</view>
					<view class="flex" style="padding:0 20rpx;align-items: center;color:white">
						<u-icon name="map-fill" color="#fff"></u-icon>
						<view style="width: calc(100% - 100rpx);margin-left: 10rpx;font-size: 26rpx;">
							{{orderInfo.address}}</view>
					</view>
				</view>
				<view class="orderDetailsHeader">
					<view class="shopDetails">
						<view class="lineContainer">
							<view class="line"></view>
							<view style="font-weight: 700;">门店明细</view>
						</view>
						<view :style="{color:color}" v-if="userName == 'admin'">
							<text style="font-size: 24rpx;font-weight:700;margin-right:10rpx;">¥</text>{{orderInfo.totalAmount}}
						</view>
					</view>
					<view style="padding:0 20rpx;font-size: 28rpx;">
						<view class="flex justify-between" style="margin-top: 20rpx;">
							<view class="label">联系人</view>
							<view class="val">{{orderInfo.username}}</view>
						</view>
						<view class="flex justify-between" style="margin-top: 20rpx;">
							<view class="label">联系电话</view>
							<view class="val">{{orderInfo.phone}}</view>
						</view>
						<view class="flex justify-between" style="margin-top: 20rpx;">
							<view class="label">发货日期</view>
							<view class="val">{{orderInfo.deliveryDate}}</view>
						</view>
						<view class="flex justify-between" style="margin-top: 20rpx;">
							<view class="label">所在仓库</view>
							<view class="val">{{orderInfo.areaName}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cad">
			<view class="shopDetails" >
				<view class="lineContainer">
					<view class="line"></view>
					<view style="font-weight: 700;">营业区转化图</view>
				</view>
				<!-- -->
				<view :style="{color:color}"  @click="showContract=true" v-if="orderInfo.contractType == 0  && isShare && orderInfo.orderType == 2 ">
					生成电子合同
				</view>
			</view>
			<image style="display: block;margin:10rpx auto"  @click='preImg(orderInfo.storeImgs)' :src='orderInfo.storeImgs ? "https://" + orderInfo.storeImgs : noImage' class="cadImage"></image>
			<image  style="display: block;margin:10rpx auto" @click='preImg(orderInfo.cadImg)' :src='orderInfo.cadImg ? "https://" + orderInfo.cadImg : noImage' class="cadImage"></image>
			<image  style="display: block;margin:10rpx auto" @click='preImg(orderInfo.storageOriginImg)' :src='orderInfo.storageOriginImg  ? "https://" + orderInfo.storageOriginImg : noImage' class="cadImage"></image>
			<image  style="display: block;margin:10rpx auto" @click='preImg(orderInfo.goodsOfferImg)' :src='orderInfo.goodsOfferImg ? "https://" + orderInfo.goodsOfferImg : noImage' class="cadImage"></image>
			<image  style="display: block;margin:10rpx auto" @click='preImg(orderInfo.storageOfferImg)' :src='orderInfo.storageOfferImg ? "https://" + orderInfo.storageOfferImg : noImage' class="cadImage"></image>
		</view>
		<u-action-sheet @close="showContract=false" @select="selectClick" :actions="list" title="选择生成电子合同类型" :show="showContract" round="15"></u-action-sheet>
	</view>
</template>
<script>
	let app = getApp();
	export default {
		data() {
			return {
				showContract:false,
				title: '',
				color: app.globalData.defaultColor,
				orderInfo: null,
				userName:uni.getStorageSync('userName'),
				noImage:'https://cdn.uviewui.com/uview/empty/data.png',
				picList:[],
				isShare:false,
				contractType:0,
				list: [
						{
							name: '分期合同',
						},
						{
							name: '普通合同',
						}
				],
			}
		},
		onLoad(option) {
			this.isShare = uni.getStorageSync('shareContract');
			this.orderInfo = JSON.parse(option.order);
			this.title = this.orderInfo.storeName;
			this.orderInfo.phone = this.orderInfo.customPhone.split('-')[1];
			this.orderInfo.username = this.orderInfo.customPhone.split('-')[0];
			this.orderInfo.storeImgs&&this.picList.push('https://'+this.orderInfo.storeImgs)
			this.orderInfo.cadImg&&this.picList.push('https://'+this.orderInfo.cadImg)
			this.orderInfo.storageOriginImg&&this.picList.push('https://'+this.orderInfo.storageOriginImg)
			this.orderInfo.goodsOfferImg&&this.picList.push('https://'+this.orderInfo.goodsOfferImg)
			this.orderInfo.storageOfferImg&&this.picList.push('https://'+this.orderInfo.storageOfferImg)
		},
		methods: {
			selectClick(e){
				if(e.name=="分期合同"){
					this.contractType=1
					this.gotoContract(1)
				}else{
					this.contractType=2
					this.gotoContract(2)
				}
				
			},
			viewContract(){
				uni.downloadFile({
				  url:this.orderInfo.contractImg,
				  success: function (res) {
				    var filePath = res.tempFilePath;
				    uni.openDocument({
				      filePath: filePath,
				      showMenu: true,
				      success: function (res) {
				        console.log('打开文档成功');
				      }
				    });
				  }
				});
			},
		  gotoContract(type){
		  	uni.navigateTo({
		  		url:`/pages/contract/index?type=${type}&id=${this.orderInfo.id}&storeName=${this.orderInfo.storeName}&address=${this.orderInfo.address}&totalPayment=${this.orderInfo.totalAmount}&createdAt=${this.orderInfo.createdAt}`
		  	})
		  },
		  cancelContract(){
			  let params = {
			  	orderId:this.orderInfo.id
			  }
			  uni.$u.http.post('/order/cancelContract', params).then(res => {
			     uni.navigateBack({
					 delta:1
				 })
			  })
		  },
          preImg(info){
			if(info){
				let current= this.picList.indexOf('https://'+info)
				if(current!=-1){
					uni.previewImage({
						current,
						urls:this.picList
					})
				}
			}else{
				uni.$u.toast('CAD暂未上传图片!')
			}
		  }
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		width: 700rpx;
		position: absolute;
		top: 200rpx;
		z-index: 10000;
		left: 25rpx;
	}
.cad{
	width: 700rpx;
	position: absolute;
	top: 720rpx;
	z-index: 10000;
	left: 25rpx;
	height: calc(100% - 800rpx);
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	background-color: white;
	border-radius: 10rpx;
}
	.bg {
		width: 700rpx;
		height: 410rpx;
		position: relative;
	}

	.flex {
		display: flex;
	}

	.orderDetailsHeader {
		padding-bottom:20rpx;
		width: 100%;
		background-color: white;
		border-radius: 16rpx;
		position: absolute;
		top: 170rpx;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.lineContainer {
		display: flex;
		align-items: center;
		.line {
			width: 8rpx;
			height: 24rpx;
		    background: #3077FF;
			border-radius: 4rpx;
			margin-right: 10rpx;
			font-size: 30rpx;
		}
	}
	.shopDetails{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:20rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 28rpx;
	}
	.justify-between{
		align-items: center;
		justify-content: space-between;
	}
	.label{
		color:#666;
	}
	.val{
		color:#2D2D2D;
	}
	.cadImage{
		width: 675rpx;
		margin:0 auto;
		height: 375rpx;
		border-radius:10rpx;
		border:1rpx solid #eee;
		margin-top:20rpx;
	}
</style>